<template>
    <el-dialog title="添加时间段" class="setTime" width="350px" :visible.sync="isDial" :before-close='closeDialog'>
    <el-form :model="form" size='mini' ref="addTimes"> 
        <el-form-item label="服务类型" prop='type' :label-width="formLabelWidth">
            <el-select v-model="form.type" class="leftBorder">
                <el-option label="精装验房" :value="1"></el-option>
                <el-option label="毛坯验房" :value="0"></el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="建筑面积" prop='buildAreaId' :label-width="formLabelWidth">
            <el-select v-model="form.buildAreaId" class="leftBorder">
                <el-option v-for="item in measures" :label="item.areaText" :value="item.id"></el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="服务时长" prop='duration' :label-width="formLabelWidth">
            <el-select v-model="form.duration" class="leftBorder">
                <el-option label="60分钟" :value="60"></el-option>
                <el-option label="90分钟" :value="90"></el-option>
                <el-option label="120分钟" :value="120"></el-option>
                <el-option label="150分钟" :value="150"></el-option>
                <el-option label="180分钟" :value="180"></el-option>
              </el-select>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="saveTime">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            form:{
                duration:"",
                type:'', 
                buildAreaId:'',
            },
            formLabelWidth:'90px',
            isDial:false,
            measures:'',
            title:'添加时间段'
        }
    },
    created(){
        let that = this;
        
        this.$root.$on("addTime", (type,data) => {
            this.isDial=true
            this.measure()
            if(type=='edit'){
                let obj ={}
                console.log(data)
                for(let i in data){
                    obj[i]=data[i]
                }
                this.form=obj
                this.title='编辑时间段'
            }else{
                let form=this.form
                for(let i in form){
                    form[i]=""
                }
                this.title='添加时间段'
            }
        });
    },
    methods:{
        saveTime(){
            let that=this
            let met='POST'
            let form=this.form
            let measures=this.measures
            console.log(form)
            let params={
                buildAreaId: form.buildAreaId,
                duration: form.duration,
                type: form.type
            }
            for(let i in measures){
                if(params.area==measures[i].id){
                    params.areaText=measures[i].areaText
                }
            }
            let url="service/times"
            if(this.title=='编辑时间段'){
                met='PUT'
                params.id=form.id
            }
            request.ajaxPost({
                url,
                that,
                type:met,
                params,
                fn(res) {
                    console.log(res);
                    that.isDial = false;
                    that.resetForm()
                    that.$root.$emit('saveT','save')
                }
            });
        },
        resetForm() {
            this.$refs['addTimes'].resetFields();
        },
        closeDialog(){
            this.isDial=false
            this.resetForm();
        },
        measure(){ //面积段
            let that=this
            let url='build/area'
            request.ajaxGet({
                url,
                that,
                fn(res){
                    console.log(res.list)
                    that.measures=res.list
                }
            })
        }
    },
    
}
</script>
<style lang="less" scoped>
.setTime{
    text-align: left;
}
</style>
